import {
  ActionType,
  DrawerForm,
  ProColumns,
  ProForm,
  ProFormDigit,
  ProFormInstance,
  ProFormRadio,
  ProFormSelect,
  ProTable,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { fetchChannelUser, getSubChannelPercent } from '../service';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateDayRateForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  const [tableList, setTableList] = useState<any>([]);
  const getRateDetail = async ()=>{
    const rsp = await getSubChannelPercent({});
       if(rsp.code ==="SUCCESS") {
        if(rsp.data.length > 0) {
          const rateDetail = rsp.data[rsp.data.length-1];
          formRef?.current?.setFieldsValue({
            type: rateDetail.type,
            channel: rateDetail.subId,
            percent: rateDetail.percent,
          });
          
        }
        setTableList(rsp.data);
       }
  }
  const columns: ProColumns<any>[] = [
    {
      title: '渠道',
      dataIndex: 'subId',
      valueType: 'select',
      request: async()=>{
        const rsp = await fetchChannelUser({});
        return [...rsp.data,{label: '全部渠道',value: 0}];
      }
    },
   
    {
      title: '佣金比例',
      dataIndex: 'percent',
      valueType: 'percent'
    },
    {
      title: '开始时间',
      dataIndex: 'createTime',
      valueType: 'date'
    }
  ];

  return (
    <DrawerForm
      title="产品渠道管理"
      width="640px"
      formRef={formRef}
      visible={props.updateModalVisible}
      onVisibleChange={async (val) => {
        if (!val) {
          props.onCancel();
        } else {
          formRef?.current?.setFieldsValue({
            type: 1,
          });
          await getRateDetail();
        }
        actionRef?.current.reload();
      }}
      onFinish={async (val) => {
        props.onSubmit({ ...val });
      }}
    >
    <ProForm.Group>
      <ProFormSelect
      label="选择渠道"
      name="channel"
      width="sm"
      request={async()=>{
        const rsp = await fetchChannelUser({});
        return rsp.data;
      }}
      >
      </ProFormSelect>
      <ProFormRadio.Group
        name="type"
        label="佣金模式"
        radioType='button'
        options={[
          {
            label: '固定佣金',
            value: 1,
          },
          {
            label: '固定比例',
            value: 2,
          },
          
        ]}
      />
       
     </ProForm.Group>  
     <ProFormDigit
        width="sm"
        name="percent"
        label="佣金比例"
        max={100}
        placeholder="请输入佣金比例"
        rules={[{ required: true, message: '佣金比例不能为空!' }]}
      /> 
     <ProTable<any>
      columns={columns}
      actionRef={actionRef}
      request={ async() => {
       
        return {
          data: tableList,
        };
      }}
      headerTitle="渠道数据"
      rowKey="key"
      search={false}
      pagination={false}
    />
     
      </DrawerForm>
  );
};

export default UpdateDayRateForm;
